<template>
	<div class="commit-footer">
		<div class="addr_foot" v-if="showFooter">
			<div class="addr_foot_f">
				<div><span>当前城市：</span><span>{{CurrentCity}}</span></div>
				<div><span>当前区县：</span><span style='color: red;'>{{CurrentDistrict}}</span></div>
				<div><span>当前地址：</span><span>{{CurrentLocation}}</span></div>
			</div>
			<div class="addr_foot_s">
				<div @click="RefreshPositioning">刷新定位</div>
			</div>
		</div>
		<div class="left-countbox" v-if="showFooter">
			<div class="left-count">
				<div class="top">
					订单总件数:<i>{{ actualQty }}</i>件
				</div>
				<div class="bottom">
					当前扫描:<i>{{ count.length }}</i>件
				</div>
			</div>
			<div class="commit-button-box">
				<div v-if='(HasLoading && HasLoading == actualQty) || !HasLoading' class="commit-button BatchCommit"
					@click='BatchCommit'>批量提交</div>
				<div class="commit-button" @click="checkForCommit">提交</div>
			</div>
			<v-confirm ref="myConfirm" @userBehavior="userBehaviorFun"></v-confirm>
		</div>
		<!-- 批量提交修改数量弹出框 -->
		<div class="BatchCommitPopBox" v-show='BatchCommit_show'>
			<div class="BatchCommit_">
				<div class="BatchCommit_head">请填写要批量提交的数量</div>
				<div class="BatchCommit_info"><span>订单总件数：</span><span>{{actualQty}}</span></div>
				<div v-if='HasLoading' class="BatchCommit_info"><span>已装车件数：</span><span>{{HasLoading}}</span></div>
				<div class="BatchCommit_content">
					<!-- <span>批量提交数量：</span> -->
					<input type="number" pattern="[0-9]*" v-model='BatchCommitNumber'>
				</div>
				<div class="BatchCommit_btn">
					<div class="commit-button" @click='BatchCommitCancel'>取消</div>
					<div class="commit-button" @click='BatchCommitConfirmbefore'>批量提交</div>
				</div>
			</div>
		</div>
		<!-- 签收前弹出选择 派件方式（直送、转寄） -->
		<div class="SelectDelivery" v-if='SelectDelivery_show'>
			<div class="DeliveryBox">
				<div class="DeliveryBox_head">请选择派件方式</div>
				<div class="DeliveryBox_content">
					<div @click='DeliverySelect("直送")'
						v-if='!(reference10 == "ZK" && needToPay == false && (chargeTypes =="到付现结" || chargeTypes =="到付" || chargeTypes =="到付月结" || iN01Flag == "Y" || destType == "1"))'
						:class="{DeliveryBox_content_active : deliveryMethod_crru == '直送'}"><span>直送</span><i
							v-if='deliveryMethod_crru=="直送"' class="iconfont icon-duigou"></i></div>
					<div @click='DeliverySelect("转寄")'
						:class="{DeliveryBox_content_active : deliveryMethod_crru == '转寄'}"><span>转寄</span><i
							v-if='deliveryMethod_crru=="转寄"' class="iconfont icon-duigou"></i></div>
				</div>
				<div v-if='deliveryMethod_crru == "转寄"' class='DeliveryBox_input' @click='SelectCarrier'>
					<span>转寄承运商：</span>
					<span>{{forwardSupplier_crru}}</span>
					<i class="iconfont icon-xiangshang"></i>
				</div>
				<div v-if='reference10 == "ZK" && needToPay == true && (chargeTypes =="到付现结" || chargeTypes =="到付" || chargeTypes =="到付月结")' class="DeliveryBox_style">
					<span>此件为到付件，可直接送至客户处扫码支付或填写月结，点击确定支付可在页面下查询支付结果</span>
				</div>
				<div v-if='reference10 == "ZK" && needToPay == false && ((crruentconfirm == "批量" && actualQty == BatchCommitNumber) || (crruentconfirm != "批量" && notScanLabelNo.length == 0)) && (chargeTypes =="到付现结" || chargeTypes =="到付" || chargeTypes =="到付月结")' class="DeliveryBox_style">
					<span>此件为到付件，可转寄到 网点，点击确定后可在订单详情页点击 扫码交接按钮交接即可！</span>
				</div>
				<div class="DeliveryBox_bottom">
					<div><span @click="DeliveryBoxCancel">取消</span></div>
					<div><span @click="DeliveryBoxConfirm">确定</span></div>
				</div>
			</div>
		</div>
		<div class="CarrierSelection" v-if='CarrierSelection_show'>
			<div class="CarrierSelectionBox">
				<div class="CarrierSelection_head">请选择转寄承运商</div>
				<div class="CarrierSelection_content">
					<div @click="CarrierSelected(index)"
						:class="{CarrierSelection_active : CarrierSelecteditem == index}"
						v-for='(dataItem,index) in CarrierList' :id="index" :key='index'>{{dataItem.forwardSupplier}}
					</div>
				</div>
				<div class="CarrierSelection_bottom">
					<div><span @click="CarrierSelectionCancel">取消</span></div>
					<div><span @click="CarrierSelectionConfirm">确定</span></div>
				</div>
			</div>
		</div>
		<!-- 提交前 如果没有全部扫描 提示弹出框 -->
		<div class="SelectDelivery" v-if='commitPopUp_show'>
			<div class="DeliveryBox">
				<div class="DeliveryBox_head commitPopUp_head" style="color: red;border: none;">订单未扫描完，是否提交？</div>
				<div class="DeliveryBox_content commitPopUp_content">
					<div style="border: none;"><span>订单总件数：</span><span style="color: red;">{{actualQty}}</span></div>
					<div style="border: none;"><span>当前提交数：</span><span style="color: red;">{{count.length}}</span>
					</div>
				</div>
				<div class="DeliveryBox_head commitPopUp_head" style="color: red;border: none;">请确认地址是否正确？</div>
				<div class="DeliveryBox_head commitPopUp_head" style="color: red;border: none;">不正确请刷新定位<span
						class="addr_foot_sl" @click="RefreshPositioning">刷新定位</span></div>
				<div class="DeliveryBox_content commitPopUp_content">
					<div style="border: none;"><span>当前城市：</span>{{CurrentCity}}</div>
					<div style="border: none;"><span>当前区县：</span><span style='color: red;'>{{CurrentDistrict}}</span>
					</div>
					<div style="border: none;"><span>当前地址：</span>{{CurrentLocation}}</div>
				</div>
				<div class="DeliveryBox_bottom">
					<div><span @click="commitPopUpCancel">取消</span></div>
					<div><span @click="commitPopUpConfirm">确定</span></div>
				</div>
			</div>
		</div>
		<!-- 提交前 全部扫描后 提示弹出框 -->
		<div class="SelectDelivery" v-if='AllCommitPopUp_show'>
			<div class="DeliveryBox">
				<div class="DeliveryBox_head commitPopUp_head" style="color: red;border: none;">请确认地址是否正确？</div>
				<div class="DeliveryBox_head commitPopUp_head" style="color: red;border: none;">不正确请刷新定位<span
						class="addr_foot_sl" @click="RefreshPositioning">刷新定位</span></div>
				<div class="DeliveryBox_content commitPopUp_content">
					<div style="border: none;"><span>当前城市：</span>{{CurrentCity}}</div>
					<div style="border: none;"><span>当前区县：</span><span style='color: red;'>{{CurrentDistrict}}</span>
					</div>
					<div style="border: none;"><span>当前地址：</span>{{CurrentLocation}}</div>
				</div>
				<div class="DeliveryBox_bottom">
					<div><span @click="AllCcommitPopUpCancel">取消</span></div>
					<div><span @click="AllCcommitPopUpConfirm">确定</span></div>
				</div>
			</div>
		</div>
		<div v-if="ifTips" class="msg_tips">
			<div class="tips_content">
				<i class="iconfont icon-chenggong1"></i>
				<p>{{tips_Msg}}</p>
			</div>
		</div>
	</div>
</template>
<script>
	import {
    commitTaskScan,
    commitTaskBatchScan
	} from '@/api/api';
	import Confirm from '../components/confirm'
	import {
		getForwardSupplier
	} from '@/api/components/commitFooter'
	import $ from 'jquery'
	export default {
		name: "commit-footer",
		components: {
			'v-confirm': Confirm
		},
		data() {
			return {
				docmHeight: document.documentElement.clientHeight, // 默认屏幕高度
				realHeight: 0, // 实时屏幕高度
				showFooter: true, // 显示底部fixed
				CurrentCity: '', // 当前城市
				CurrentLocation: '', // 当前地址
				CurrentDistrict: '', // 当前区县
				cleanOrderList: [],
				commitImgDialog: false,
				BatchCommit_show: false, // 批量提交修改数量弹出框 是否出现
				BatchCommitNumber: '', // 批量提交数量
				latitude: '',
				longitude: '',
				tips_Msg: '', // 提示信息
				ifTips: false,
				SelectDelivery_show: false, // 签收前弹出选择 派件方式（直送、转寄
				crruentconfirm: '', // 是提交还是批量提交
				deliveryMethod_crru: '', // 派件方式
				forwardSupplier_crru: '', // 转寄承运商
				forwardSupplierId_crru: '', // 转寄承运商 id
				CarrierList: [], // 承运商列表
				CarrierSelection_show: false, // 选择转寄承运商弹框是否出现
				CarrierSelecteditem: 0, // 临时选中的转寄承运商
				commitPopUp_show: false, // 提交前 如果没有全部扫描 提示弹出框
				AllCommitPopUp_show: false, // 提交前 全部扫描 提示弹出框
				linkNode:''
			}
		},
		props: [
			'count', // 运单数量
			'orderCount', // 订单数量
			'countData',
			'orderList',
			'notScanLabelNo', // 未扫描标签列表
			'cacheResponseData',
			'deliveryId',
			'transportLinks', // 扫描环节
			'actualQty', // 订单总件数
			'omsNo', // 订单号
			'orderId', // 订单id
			'HasLoading', // 已装车件数
			'AbHasScanNum', // 异常已签收数量
			'deliveryMethod', // 派件方式
			'forwardSupplier', // 转寄承运商
			'forwardSupplierId', // 转寄承运商 id
			'reference10', // 判断是哪个项目
			'businessType', //  产品名称
			'chargeTypes', // 付款方式
			'destType', // 是否强制转寄（网点）
			'iN91Flag', // 是否是IN91  如果是 值为XY
			'iN01Flag', // 是否需要代收货款  如果是 值为Y
      		'needToPay' // 是否为试点到付
    ],
    watch: {
      realHeight:function() {
        //如果默认高度大于实际高度则影藏，反之就显示
        if (this.docmHeight > this.realHeight) {            
          this.showFooter = false        
        } else {            
          this.showFooter = true        
        }
      }
    },
		mounted() {
			let that = this;
			this.onPlusReady('e') // 获取APP经纬度
			this.deliveryMethod_crru = this.deliveryMethod; // 派件方式
      this.forwardSupplier_crru = this.forwardSupplier; // 转寄承运商
      console.log(this.forwardSupplier_crru)
      this.forwardSupplierId_crru = this.forwardSupplierId; // 转寄承运商 id
      window.onresize = ()=>{
        return(()=>{
          // 实时屏幕高度
          this.realHeight = document.body.clientHeight
        })()
			}
			let path = this.$route.path
			switch (path) {
				default:
					that.linkNode = '10'
					break
			}
		},
		methods: {
			// 刷新定位
			RefreshPositioning() {
				this.onPlusReady('e') // 获取APP经纬度
			},
			// 选中转寄承运商
			CarrierSelected(index) {
				this.CarrierSelecteditem = index;
			},
			// 选择转寄承运商弹框消失
			CarrierSelectionCancel() {
				this.CarrierSelection_show = false;
			},
			// 选择转寄承运商弹框确认按钮
			CarrierSelectionConfirm() {
				let that = this;
				if (this.CarrierList.length) {
					this.forwardSupplier_crru = this.CarrierList[that.CarrierSelecteditem].forwardSupplier;
					this.forwardSupplierId_crru = this.CarrierList[that.CarrierSelecteditem].forwardSupplierId;
				}
				this.CarrierSelection_show = false;
			},
			SetCurrAddress(lngad) {
				this.ReceivingLatitud(lngad);
			},
			// 选择派送方式
			DeliverySelect(way) {
				this.deliveryMethod_crru = way;
			},
			// 选择转寄承运商
			SelectCarrier() {
				let that = this;
				if (that.reference10 == 'ZK') {
          that.$alert('该订单的转寄承运商只能为SF', '提示', {
            confirmButtonText: '确定'
          })
					return;
				}
				if (!this.CarrierList.length) {
					that.httpRequest1('post', getForwardSupplier, {}).then(res => {
						that.CarrierList = res.entity;
						for (let jk = 0; jk < that.CarrierList.length; jk++) {
							if (that.CarrierList[jk].forwardSupplierId == that.forwardSupplierId_crru) {
								that.CarrierSelecteditem = jk;
								break;
							}
						}
					})
				} else {
					for (let jq = 0; jq < that.CarrierList.length; jq++) {
						if (that.CarrierList[jq].forwardSupplierId == that.forwardSupplierId_crru) {
							that.CarrierSelecteditem = jq;
							break;
						}
					}
				}
				this.CarrierSelection_show = true;
			},
			// 签收前弹出选择 派件方式 消失
			DeliveryBoxCancel() {
				this.SelectDelivery_show = false;
			},
			// 签收
			DeliveryBoxConfirm() {
				let that = this;
				if (that.reference10 == 'ZK' && (that.needToPay == false || (that.needToPay == true && that.deliveryMethod_crru == '转寄')) && (that.chargeTypes == '到付现结' || that.chargeTypes == '到付' || that
						.chargeTypes == '到付月结' || that.destType == '1') && $('div.uploadImg ul>li').length < 1) {
					that.$alert('请拍摄接收货物的 小哥工牌照片', '提示', {
						confirmButtonText: '确定'
					})
					return;
				}
				if (that.businessType == '专享急件' && $('div.uploadImg ul>li').length < 1) {
					that.$alert('专享急件必须拍照上传，才能提交', '提示', {
						confirmButtonText: '确定'
					})
					return;
				}
				if (that.iN91Flag == 'XY' && $('div.uploadImg ul>li').length < 1) {
					that.$alert('客户要求电子验证，请拍照上传后再妥投！', '提示', {
						confirmButtonText: '确定'
					})
					return;
				}
				if (that.crruentconfirm == '批量') {
					that.BatchCommitConfirmitem();
				} else {
					this.commitData();
				}
			},
			// 批量提交弹出框出现
			BatchCommit() {
				if (this.count.length === 0) {
					return;
				}
				if (this.businessType == '专享急件' && $('div.uploadImg ul>li').length < 1) {
					this.$alert('专享急件必须拍照上传，才能提交', '提示', {
						confirmButtonText: '确定'
					})
					return;
				}
				this.onPlusReady('isLoading_')
				this.BatchCommit_show = true;
				this.crruentconfirm = '批量'
				this.$emit('scanFun', false) // 关闭摄像头
			},
			// 批量提交弹出框 取消按钮
			BatchCommitCancel() {
				this.BatchCommit_show = false;
				this.$emit('scanFun', true) // 打开摄像头
			},
			BatchCommitConfirmitem() {
				let that = this;
				if (that.deliveryMethod_crru == '直送') {
					that.forwardSupplier_crru = '';
					that.forwardSupplierId_crru = '';
				}
        let postData = {
					deliveryId: that.deliveryId, // 运单id
					labelNumber: that.BatchCommitNumber, // 数量
					transportLinks: that.$store.state.Waybill.waybillTemporary == 1 ? that.$store.state.Waybill.waybillStowageNode : that.linkNode, // 扫描环节
					scanPerson: that.$store.state.userInfo.userName, // 扫描人的名称 *
					address: that.CurrentLocation,
					latitude: that.latitude,
					longitude: that.longitude,
					city: that.CurrentCity,
					district: that.CurrentDistrict,
					cellphone: that.$store.state.userInfo.cellphone, // 扫描人的电话 *
					supplierId: that.$store.state.userInfo.orgnizationId, // 承运商的ID
					supplierName: that.$store.state.userInfo.orgnizationName, // 承运商的名称
					deliveryMethod: that.deliveryMethod_crru, // 派件方式
					forwardSupplier: that.forwardSupplier_crru, // 转寄承运商
					forwardSupplierId: that.forwardSupplierId_crru // 转寄承运商 id
				};
				that.httpRequest1('post', commitTaskBatchScan, postData).then(res => {
          if ($('div.uploadImg ul>li').length > 0) {
            that.$parent.updateimg();
          } else {
            that.ifTips = true;
            that.tips_Msg = '批量提交成功';
            setTimeout(function () {
              that.ifTips = false;
              that.$router.back(-1);
            }, 1500)
          }
        }).catch(function (res) {
          that.$emit('reflash', true);
          that.$emit('scanFun', true);
        })
			},
			// 批量提交前
			BatchCommitConfirmbefore() {
				let that = this;
				if (!this.BatchCommitNumber) {
					return;
				}
				// 判断输入的是否为数字，不是数字则return
				if (parseInt(this.BatchCommitNumber).toString() == 'NaN' || parseInt(this.BatchCommitNumber) < 0 || this.BatchCommitNumber != parseInt(this.BatchCommitNumber)) {
					that.$alert('请输入正整数', '提示', {
						confirmButtonText: '确定'
					})
					return;
				}
				if ((that.linkNode == '30' || that.linkNode == '27') && that.BatchCommitNumber < that.actualQty) {
					that.$alert('派件装车子母件分离时不允许批量提交，请逐件扫描后使用提交功能', '提示', {
						confirmButtonText: '确定'
					})
					return
				}
				if (that.HasLoading) {
					if (that.BatchCommitNumber > that.HasLoading) {
						that.$alert('批量扫描件数不能超过已装车件数', '提示', {
							confirmButtonText: '确定'
						})
						return;
					}
				} else {
					if (that.BatchCommitNumber > that.actualQty) {
						that.$alert('批量提交数量不能超过订单总件数', '提示', {
							confirmButtonText: '确定'
						})
						return;
					}
				}
				this.AllCommitPopUp_show = true;
			},
			userBehaviorFun(type, data) {
				if (type !== 'clickCancel') {
					this.commitData()
				} else {
					this.$emit('scanFun', true)
				}
			},
			// 提交前 没有完全扫描 弹出框 消失
			commitPopUpCancel() {
				this.commitPopUp_show = false;
			},
			// 提交前 没有完全扫描 弹出框 确定
			commitPopUpConfirm() {
				this.commitData();
			},
			// 提交前 完全扫描 弹出框 消失
			AllCcommitPopUpCancel() {
				this.AllCommitPopUp_show = false;
			},
			// 提交前 完全扫描 弹出框 确定
			AllCcommitPopUpConfirm() {
				if (this.crruentconfirm == '批量') {
					this.BatchCommitConfirmitem();
				} else {
					this.commitData();
				}
			},
			// 判断路由，提货扫描以及签收扫描弹出弹窗
			checkForCommit() {
				if (this.count.length !== 0) {
					if (this.businessType == '专享急件' && $('div.uploadImg ul>li').length < 1) {
						this.$alert('专享急件必须拍照上传，才能提交', '提示', {
							confirmButtonText: '确定'
						})
						return;
					}
					this.onPlusReady('isLoading_')
					this.crruentconfirm = '提交';
					if (this.count.length < this.actualQty) {
						this.commitPopUp_show = true;
						return;
					}
					this.AllCommitPopUp_show = true;
					this.$emit('scanFun', false) // 关闭摄像头
				}
			},
			/**
			 * 数据提交
			 */
			commitData() {
				let that = this;
				this.commitPopUp_show = false;
				this.SelectDelivery_show = false;
				that.AllCommitPopUp_show = false;
				if (that.deliveryMethod_crru == '直送') {
					that.forwardSupplier_crru = '';
					that.forwardSupplierId_crru = '';
				}
				let params = {}
				params.deliveryId = that.deliveryId
				params.linkNode = this.$store.state.Waybill.waybillTemporary == 1 ? this.$store.state.Waybill.waybillStowageNode :this.linkNode
				params.scanPerson = this.$store.state.userInfo.userName // 扫描人的名称 *
				params.cellphone = this.$store.state.userInfo.cellphone // 扫描人的电话 *
				params.longitude = this.longitude
				params.latitude = this.latitude
				params.city = this.CurrentCity;
				params.district = this.CurrentDistrict;
				params.address = this.CurrentLocation;
				params.deliveryMethod = this.deliveryMethod_crru // 派件方式
				params.forwardSupplier = this.forwardSupplier_crru // 转寄承运商
				params.forwardSupplierId = this.forwardSupplierId_crru // 转寄承运商 id
				params.omsNo = that.omsNo
				params.labelNos = []
				for (let key in this.count) {
					params.labelNos.push(this.count[key].order)
				}
				this.httpRequest1('post', commitTaskScan, params).then(res => {
					if ($('div.uploadImg ul>li').length > 0) {
						that.$parent.updateimg();
					} else {
						that.$alert(res.detail, '提示', {
							confirmButtonText: '确定'
						})
					}
					this.$emit('reflash', true)
					this.$emit('scanFun', true)
				}).catch(res => {
                     this.$emit('scanFun', true)
				})
			}
		}
	}
</script>
<style scoped lang="less">
	@import "publicLess.less";
	.CarrierSelection {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999999;
		font-size: 28/50rem;
		.CarrierSelectionBox {
			width: 600/50rem;
			background-color: #fff;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 15/50rem;
			.CarrierSelection_head {
				text-align: center;
				height: 80/50rem;
				line-height: 80/50rem;
				border-bottom: 1/50rem solid #ddd;
			}
			.CarrierSelection_content {
				margin-bottom: 40/50rem;
				& > div {
					height: 70/50rem;
					line-height: 70/50rem;
					text-align: center;
					border-bottom: 1/50rem solid #ddd;
					position: relative;
					&.CarrierSelection_active {
						background-color: rgba(0, 143, 234, 0.4);
					}
				}
			}
			.CarrierSelection_bottom {
				overflow: hidden;
				margin: 30/50rem 0;
				& > div {
					width: 50%;
					float: left;
					text-align: center;
					height: 60/50rem;
					line-height: 60/50rem;
					span {
						width: 80%;
						border-radius: 30/50rem;
						display: block;
						margin: 0 auto;
						background-color: @PublicColor;
						color: #fff;
					}
				}
			}
		}
	}
</style>